<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <!-- <div class="flex item-flex">
        <div class="bg-gray-200 w-1/2 h-1/2">1</div>
        <div class="bg-gray-300 w-1/2 h-1/2">2</div>
    </div> -->
    <h1 class="text-gray-800 text-9xl font-bold h-40  w-full text-center">
        hello world!
    </h1>

    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">
        <div class="shrink-0">
            <svg class="size-12" viewBox="0 0 40 40">
                <defs>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
                        <stop stop-color="#2397B3" offset="0%"></stop>
                        <stop stop-color="#13577E" offset="100%"></stop>
                    </linearGradient>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
                        <stop stop-color="#73DFF2" offset="0%"></stop>
                        <stop stop-color="#47B1EB" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <g fill="none" fill-rule="evenodd">
                    <path
                        d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z"
                        fill="url(#a)" transform="translate(1 1)"></path>
                    <path
                        d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z"
                        fill="url(#b)" transform="translate(1 1)"></path>
                    <path
                        d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
                        fill="#FFF"></path>
                </g>
            </svg>
            <!-- <img class="size-12" src="./img/logo.svg" alt="ChitChat Logo"> -->
        </div>
        <div>
            <div class="text-xl font-medium text-black  ">ChitChat</div>
            <p class="text-slate-500">You have a new message!</p>
        </div>
    </div>


    <div
        class="py-8 px-8 max-w-sm mx-auto space-y-2 bg-white rounded-xl shadow-lg sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:gap-x-6">
        <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0"
            src="https://www.tailwindcss.cn/img/erin-lindford.jpg" alt="Woman's Face" />
        <div class="text-center space-y-2 sm:text-left">
            <div class="space-y-0.5">
                <p class="text-lg text-black font-semibold">
                    Erin Lindford
                </p>
                <p class="text-slate-500 font-medium">
                    Product Engineer
                </p>
            </div>
            <button
                class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
        </div>
    </div>
</body>

</html>